<template>
  <div class="main">
    <div class="navigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/administrators' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>立项管理</el-breadcrumb-item>
        <el-breadcrumb-item>高校审核项目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <div class="list">
        <p>批次</p>
        <el-select v-model="BatchValue" placeholder="2024年批次" size="large" style="width: 200px">
          <el-option
            v-for="item in Batch"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>项目名称</p>
        <el-input v-model="ProjectName" style="width: 200px; height: 40px" placeholder="项目名称" />
        <p>项目类型</p>
        <el-select
          v-model="ProjectTypeValue"
          placeholder="请选择项目类型"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in ProjectType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>高校专家组</p>
        <el-select
          v-model="ExpertGroupValue"
          placeholder="请选择高校专家组"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in ExpertGroup"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="list">
        <p>项目申报方式</p>
        <el-select
          v-model="ProjectDeclareValue"
          placeholder="未选择项目申报方式"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in ProjectDeclare"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>审核状态</p>
        <el-select
          v-model="ReviewStatusValue"
          placeholder="未选择审核状态"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in ReviewStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>项目级别</p>
        <el-select
          v-model="ProjectLevelValue"
          placeholder="未选择项目级别"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in ProjectLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>项目类别</p>
        <el-select
          v-model="ProjectCategoryValue"
          placeholder="未选择项目类别"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in ProjectCategory"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="list">
        <p>项目负责人账号</p>
        <el-input
          v-model="ProjectPrincipalAccount"
          style="width: 200px; height: 40px"
          placeholder="项目负责人账号"
        />
        <p>项目负责人姓名</p>
        <el-input
          v-model="ProjectPrincipalName"
          style="width: 200px; height: 40px"
          placeholder="项目负责人姓名"
        />
        <p>指导教师账号</p>
        <el-input
          v-model="GuidanceTeacherAccount"
          style="width: 200px; height: 40px"
          placeholder="指导教师账号"
        />
        <p>指导教师姓名</p>
        <el-input
          v-model="GuidanceTeacherName"
          style="width: 200px; height: 40px"
          placeholder="指导教师姓名"
        />
      </div>
      <div class="list">
        <p>所属重点领域</p>
        <el-select
          v-model="BelongingKeyPointDomainValue"
          placeholder="未选择所属重点领域"
          size="large"
          style="width: 200px"
        >
          <el-option
            v-for="item in BelongingKeyPointDomain"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <p>每页显示条数</p>
        <el-select v-model="ShowStateValue" placeholder="20条" size="large" style="width: 200px">
          <el-option
            v-for="item in ShowState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-divider border-style="dashed" />
      <div class="conter">
        <el-button type="primary" plain style="width: 80px; height: 40px">查询</el-button>
      </div>
    </div>
    <div class="body">
      <!-- <button class="add" @click="$router.push('')">新增</button> -->
      <div class="button">
        <button class="add">批量审核</button>
        <button class="add">批量调整排序码</button>
      </div>
      <div class="dashedline"></div>
      <div class="list">
        <el-table
          :data="lists"
          style="width: 100%"
          class="table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="30" />
          <el-table-column type="index" width="30" />
          <el-table-column prop="sort_code" sortable label="排序码" width="110" align="center" />
          <el-table-column prop="name" sortable label="项目名称" width="110" align="center" />
          <el-table-column prop="type" sortable label="项目类型" width="110" align="center" />
          <el-table-column prop="category" sortable label="项目级别" width="110" align="center" />
          <el-table-column prop="category" sortable label="项目类别" width="110" align="center" />
          <el-table-column
            prop="firdiscipline"
            sortable
            label="所属重点领域"
            width="150"
            align="center"
          />
          <el-table-column
            prop="firdiscipline"
            sortable
            label="一级学科"
            width="120"
            align="center"
          />
          <el-table-column
            prop="expert_group"
            sortable
            label="高校专家组"
            width="120"
            align="center"
          />
          <el-table-column
            prop="expert_review"
            sortable
            label="高校专家评审情况"
            width="170"
            align="center"
          />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" @click="handleView(scope.row.name)"> 查看 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <p>共1页 {{ lists.length }} 条记录,当前显示：第 {{ paging }} 页（第 1 到 1 记录 ）</p>
        </div>
      </div>
      <div class="paging">
        <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
        <div class="demo-pagination-block">
          <!-- <div class="demonstration">Jump to</div> -->
          <el-pagination
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="prev, pager, next, jumper"
            :total="1000"
            @current-change="handleCurrentChange"
            :page-count="show_size"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const handleView = (name) => {
  router.push({
    path: '/administrators/information/',
    query: {
      interface: '高校审核项目',
      entryName: name
    }
  })
}
// const input = ref('')
// const value = ref('')
// 批次
const BatchValue = ref('')
const Batch = [
  {
    value: '2024年批次',
    label: '2024年批次'
  },
  {
    value: '2023年批次',
    label: '2023年批次'
  },
  {
    value: '2022年批次',
    label: '2022年批次'
  },
  {
    value: '2021年批次',
    label: '2021年批次'
  },
  {
    value: '2020年批次',
    label: '2020年批次'
  },
  {
    value: '2019年批次',
    label: '2019年批次'
  }
]
//项目名称
const ProjectName = ref('')
// 项目类型
const ProjectTypeValue = ref('')
const ProjectType = [
  {
    value: '创新训练项目',
    label: '创新训练项目'
  },
  {
    value: '创业训练项目',
    label: '创业训练项目'
  },
  {
    value: '创业实践项目',
    label: '创业实践项目'
  }
]
// 高校专家组
const ExpertGroupValue = ref('')
const ExpertGroup = [
  {
    value: '第一',
    label: '第一'
  }
]
// 项目申报方式
const ProjectDeclareValue = ref('')
const ProjectDeclare = [
  {
    value: '学生申报',
    label: '学生申报'
  },
  {
    value: '教师申报',
    label: '教师申报'
  },
  {
    value: '学校导入',
    label: '学校导入'
  },
  {
    value: '省厅导入',
    label: '省厅导入'
  },
  {
    value: '学校推送',
    label: '学校推送'
  }
]
// 审核状态
const ReviewStatusValue = ref('')
const ReviewStatus = [
  {
    value: '已审核',
    label: '已审核'
  },
  {
    value: '未审核',
    label: '未审核'
  }
]
// 项目级别
const ProjectLevelValue = ref('')
const ProjectLevel = [
  {
    value: '国家级',
    label: '国家级'
  },
  {
    value: '省级',
    label: '省级'
  },
  {
    value: '校级',
    label: '校级'
  }
]
// 项目类别
const ProjectCategoryValue = ref('')
const ProjectCategory = [
  {
    value: '一般项目',
    label: '一般项目'
  },
  {
    value: '重点支持领域项目',
    label: '重点支持领域项目'
  }
]

// 项目负责人账号
const ProjectPrincipalAccount = ref('')
// 项目负责人姓名
const ProjectPrincipalName = ref('')
// 指导教师账号
const GuidanceTeacherAccount = ref('')
// 指导教师姓名
const GuidanceTeacherName = ref('')
// 所属重点领域
const BelongingKeyPointDomainValue = ref('')
const BelongingKeyPointDomain = [
  {
    value: '基础学科',
    label: '基础学科'
  },
  {
    value: '新工科',
    label: '新工科'
  },
  {
    value: '新医科',
    label: '新医科'
  },
  {
    value: '新农科',
    label: '新农科'
  },
  {
    value: '新文科',
    label: '新文科'
  }
]
// 每页显示条数
const show_size = ref(5)
const ShowStateValue = ref('')
const ShowState = [
  {
    value: '20条',
    label: '20条'
  },
  {
    value: '50条',
    label: '50条'
  },
  {
    value: '100条',
    label: '100条'
  }
]
const lists = [
  {
    id: 1,
    sort_code: '排序码',
    name: '某某系统',
    type: '类型',
    level: '级别',
    category: '类别',
    focus_areas: '所属重点领域',
    firdiscipline: '一级学科',
    expert_group: '高校专家组',
    expert_review: '高校专家评审情况'
  }
]
// const currentPage3 = ref(5)
// const pageSize3 = ref(100)
const paging = ref(1)

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  paging.value = val
}
</script>

<style lang="less" scoped>
.main {
  width: 1350px;
  // background-color: #fff;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 40px;
}
.navigation {
  margin: 20px 0;
}
.header {
  background-color: #fff;
  padding: 40px 30px;
  margin-bottom: 20px;
  color: #646c9a;
  font-size: 12px;
  .list {
    display: flex;
    justify-content: left;
    height: 40px;
    // line-height: 40px;
    align-items: center;
    margin-bottom: 10px;
  }
  p {
    width: 90px;
    margin: 0 10px 0 20px;
    text-align: right;
    color: #333333;
    // background-color: pink;
  }
  .conter {
    display: flex;
    justify-content: center;
  }
}
.body {
  background-color: #fff;
  .button {
    margin-left: 30px;
  }
  .add {
    margin: 20px 10px;
    padding: 10px 10px;
    // width: 70px;
    height: 40px;
    background-color: #e9f2fa;
    border: 0;
    color: #36a0fe;
    transition: all 0.1s;
    border-radius: 5px;
    &:hover {
      background-color: #1461cd;
      color: #fff;
    }
  }

  .dashedline {
    width: 100%;
    height: 1px;
    border: 0.5px dashed #ccc;
    margin-bottom: 20px;
  }
  .list {
    padding: 0 30px;
    ul {
      display: flex;
      justify-content: space-between;
      margin: 0 30px;
      padding: 0 20px;
      height: 60px;
      align-items: center;
      border-bottom: 1px solid #ececec;
      // line-height: 50px;
      // background-color: pink;
      &:hover {
        background-color: #eef1f5;
      }
      li {
        width: 8%;
        // background-color: pink;
        text-align: center;
      }
      li:nth-child(5) {
        width: 20%;
      }
      li:nth-child(8) {
        width: 16%;
      }
    }
    .header1 {
      ul {
        background-color: #1461cd;
        color: #fff;
        font-size: 14px;
      }
    }
    .body {
      ul {
        font-size: 12px;
      }
    }
  }
  .header1 {
    ul {
      height: 40px;
    }
  }
  .page {
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    text-align: right;
    margin-right: 30px;
    margin-top: 30px;
  }
  .paging {
    display: flex;
    justify-content: center;
    padding: 30px;
  }
}
</style>
